<template>
    <el-icon @click="isCollapse = !isCollapse">
        <Expand v-if="isCollapse" />
        <Fold v-else />
    </el-icon>


    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" :to="{ path: '/dashboard/home' }">{{
            item.meta.title }}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-dropdown>
        <el-avatar :src=image />
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>{{ name }}</el-dropdown-item>
                <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {
    Expand,
    Fold,
} from '@element-plus/icons-vue'
import router from '@/router';
import axios from 'axios';
const message = ref('Hello, Vue 3!');
import { isCollapse } from './isCollapse';
const name = ref('请先登录')
const token = localStorage.getItem("token")
const image = ref("https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png")
function getdata() {
    console.log(token);
    if (token == '') {
        name.value = "请先登录"
    } else {
        axios.get("http://127.0.0.1:8000/driver_school/info/", { headers: { "token": token } })
            .then(res => {
                console.log(res)
                name.value = res.data.data.name
                image.value = res.data.data.image
            })
            .catch(err => {
                console.error(err);
            })
    }
}
function quit() {
    localStorage.removeItem('token')
    router.push("/")
}
onMounted(() => {
    // Your code here
    getdata()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>
<style>
.el-header {
    display: flex;
    align-items: center;

    .el-icon {
        margin-right: 17px;
    }
}

.el-dropdown {
    margin-left: auto;
}
</style>